<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入手机号" size="small" class="input-with-select" v-model="queryInfo.mobile"/>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.status" placeholder="状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="处理中" value="W"></el-option>
            <el-option label="同意" value="S"></el-option>
            <el-option label="拒绝" value="R"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getApplyRefundList">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table :data="applyRefundList" border stripe>
        <el-table-column label="订单号" prop="orderId" width="70"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
        <el-table-column label="退款金额" prop="refundAmount"></el-table-column>
        <el-table-column label="退款服务费" prop="serviceAmount"></el-table-column>
        <el-table-column label="退款理由" prop="orderId"></el-table-column>
        <el-table-column label="退款状态" prop="statusText"></el-table-column>
        <el-table-column label="当前订单状态" prop="curOrderStatusText"></el-table-column>
        <el-table-column label="申请时间" prop="addTime"></el-table-column>
        <el-table-column label="操作" width="78">
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="getDetail(scope.row.id)">操作</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20, 40, 60]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="300">
      <el-card>
        <el-descriptions title="基本信息" class="margin-top" :column="5" border>
          <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ order.mobile }}</el-descriptions-item>
          <el-descriptions-item label="支付状态">{{ order.payStatusText }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ order.payMethodText }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ order.orderStatusText }}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions :title="order_title" class="margin-top" :column="2" border>
          <el-descriptions-item label="惠后单价">{{ order.orderUnitPrice }}</el-descriptions-item>
          <el-descriptions-item label="惠后金额">{{ order.orderAmount }}</el-descriptions-item>
          <el-descriptions-item label="原始单价">{{ order.channelUnitPrice }}</el-descriptions-item>
          <el-descriptions-item label="原始金额">{{ order.channelAmount }}</el-descriptions-item>
          <el-descriptions-item label="影院"><el-tag>{{ order.cinemaName }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="城市">{{ order.cityName }}</el-descriptions-item>
          <el-descriptions-item label="电影"><el-tag>{{ order.movieName }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="地址">{{ order.cinemaAddress }}</el-descriptions-item>
          <el-descriptions-item label="排期"><el-tag type="danger">{{ order.playTimeText }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="版本">{{ order.edition }}</el-descriptions-item>
          <el-descriptions-item label="座位">
            <el-tag size="small" type="success">{{ order.seats }}</el-tag>
            <span style="color: red;" v-if="order.supportExchangeSeat=='N'">(<strong>不支持换坐</strong>)</span>
          </el-descriptions-item>
          <el-descriptions-item label="影厅">{{ order.hallName }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="申请信息" class="margin-top" :column="2" border>
          <el-descriptions-item label="申请状态">{{applyRefund.statusText}}</el-descriptions-item>
          <el-descriptions-item label="订单金额">{{applyRefund.orderAmount}}</el-descriptions-item>
          <el-descriptions-item label="退款金额">{{applyRefund.refundAmount}}</el-descriptions-item>
          <el-descriptions-item label="退款服务费">{{applyRefund.serviceAmount}}</el-descriptions-item>
        </el-descriptions>

        <el-form :model="processForm" label-width="110px" class="demo-ruleForm" style="margin-top: 20px;">
          <el-form-item v-if="applyRefund.status=='W'">
            <el-button type="primary" @click="processApplyRefund()">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
import Api from "@/api/MemberApplyRefund.js";

export default {
  data() {
    return {
      drawer: false,
      dialogVisible: false,
      disabled: false,
      queryInfo: {
        id: "",
        mobile: '',
        status: 'W',
        pageNo: 1,
        pageSize: 40, // 页大小
      },
      editDialogVisible: false,
      applyRefundList:[],
      order: {},
      applyRefund: {},
      processForm:{
        orderId:null,
        status:'S',
        replyRemark:''
      },
      total: 0,
      order_title:'订单详情',
    };
  },
  created() {
    this.getApplyRefundList();
  },
  methods: {
    getApplyRefundList() {
      Api.getApplyRefundList(this.queryInfo).then((res) => {
        if (res.success) {
          this.applyRefundList = res.data.records;
          this.total = res.data.total;
        } else {
          return this.$message.error("获取列表失败");
        }
      });
    },
    processApplyRefund() {
      Api.processApplyRefund(this.processForm).then((res) => {
        if (res.success) {
          this.$message.success("处理成功");
          this.getApplyRefundList();
        } else {
          return this.$message.error("保存失败：" + res.msg);
        }
      });
    },
    getDetail(id) {
      this.drawer = true;
      Api.getApplyRefund({'id': id}).then((res) => {
        if (res.success) {
          this.order = res.data.order;
          this.processForm.orderId = this.order.id;
          this.applyRefund = res.data.applyRefund;
          this.processForm.status=this.applyRefund.status;
          this.processForm.replyRemark = this.applyRefund.replyRemark;
          if(this.order.processUserName!=null){
            this.order_title = '订单详情（接单人：' + this.order.processUserName + ')';
          }else{
            this.order_title = '订单详情';
          }
        } else {
          return this.$message.error("获取订单失败");
        }
      });
    },
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize;
      this.getApplyRefundList();
    },
    handleCurrentChange(pageNo) {
      this.queryInfo.pageNo = pageNo;
      this.getApplyRefundList();
    },
  }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}

.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
